<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title>动画边框效果</title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}

			.box {
				position: relative;
				height: 200px;
				width: 200px;
				padding: 10px;
				margin: 100px auto;
				background: #eee;
				overflow: hidden;
				/*设置overflow因此隐藏掉4个模拟边框，鼠标移入后再显示出来*/
			}

			.box .item {
				height: 100%;
				color: #fff;
				font-size: 30px;
				line-height: 200px;
				text-align: center;
				background: #ccc;
			}

			.box .top,
			.box .bottom {
				height: 10px;
				width: 220px;
				background: rgb(18, 233, 54);
			}

			.box .left,
			.box .right {
				height: 220px;
				width: 10px;
				background: rgb(18, 233, 54);
			}

			.box .top {
				position: absolute;
				top: 0;
				left: -220px;
				transition: all 1s ease;
				/*必须要有，不然数百移出来的时候就不会有动画返回效果*/
			}

			.box .left {
				position: absolute;
				bottom: -220px;
				left: 0px;
				transition: all 1s ease;
			}

			.box .right {
				position: absolute;
				top: -220px;
				right: 0px;
				transition: all 1s ease;
			}

			.box .bottom {
				position: absolute;
				bottom: 0;
				right: -220px;
				transition: all 1s ease;
			}

			.box:hover .top {
				left: 10px;
				transition: all .7s ease;
			}

			.box:hover .left {
				bottom: 10px;
				transition: all .7s ease;
			}

			.box:hover .right {
				top: 10px;
				transition: all .7s ease;
			}

			.box:hover .bottom {
				right: 10px;
				transition: all .7s ease;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="item">内容</div>
			<div class="top"></div>
			<div class="right"></div>
			<div class="bottom"></div>
			<div class="left"></div>
		</div>
	</body>
</html>
